<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>首页</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!-- <link rel="shortcut icon" href="/favicon.ico"> -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="/css/iconfont.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">
    <link rel="stylesheet" href="/css/homepage/homepage.css">
    <style type="text/css">
        .infinite-scroll-preloader {
            margin-top: -20px;
        }
    </style>
</head>

<body>
    <div class="page">
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left" href="javascript:history.back(-1)"
                data-transition='slide-out'>
                <span class="icon icon-left"></span>
                返回
            </a>
            <h1 class="title">首页</h1>
        </header>
        <%- include ("../common/publicnav.ejs")%>
        
        <div class="bar bar-header-secondary">
            <div class="searchbar">
                <a class="searchbar-cancel">取消</a>
                <div class="search-input">
                    <label class="icon icon-search" for="search"></label>
                    <input type="search" id='search' placeholder='输入关键字...' />
                </div>
            </div>
        </div>
        <div class="content pull-to-refresh-content infinite-scroll infinite-scroll-bottom" data-distance="100">
            <!-- 默认的下拉刷新层 -->
            <div class="pull-to-refresh-layer">
                <div class="preloader"></div>
                <div class="pull-to-refresh-arrow"></div>
            </div>
            <!-- 这里是页面内容区 -->
            <div class="page-index">
                <div class="post row">

                    <%for(var i=0;i<list.length;i++) { %>

                    <div class="col-50" style="margin-bottom: 8px;">
                        <div class="postImgContainer" data-post="<%=list[i].id%>" onclick="goPost(this)">
                            <img src="<%=list[i].facePic%>" alt="">
                        </div>
                        <div class="postTitleContainer">
                            <span class="postTitle" data-post="<%=list[i].id%>"
                                onclick="goPost(this)"><%=list[i].postTitle%></span>
                        </div>
                        <div class="postInformation">
                            <div class="poster">
                                <div class="postImgContainer">
                                    <div class="posterImg" data-user="<%=list[i].userId%>" onclick="goUser(this)">
                                        <img src="<%=list[i].userPic%>" alt="">
                                    </div>
                                    <p class="posterName"><%=list[i].userName%></p>
                                </div>
                            </div>
                            <div class="like">
                                <div class="likeContainer">
                                    <i class="iconfont icon-like-1"></i>
                                    <span class="likeNumber"><%=list[i].fansNumber%></span>
                                </div>
                            </div>
                        </div>

                    </div>


                    <% } %>

                </div>
                <div class="infinite-scroll-preloader">
                    <div class="preloader"></div>
                </div>
            </div>
        </div>
    </div>

    <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js'
        charset='utf-8'></script>
    <script type='text/javascript'>
        $.init()

        var loading = false;
        function addItems(data) {
            // 生成新条目的HTML
            var html = '';
            for (var i = 0; i < data.length; i++) {
                html += `
                    <div class="col-50">
                        <div class="postImgContainer"  data-post="${data[i].id}" onclick="goPost(this)">
                            <img src="${data[i].pics}" alt="">
                        </div>
                        <div class="postTitleContainer">
                            <span class="postTitle" data-post="${data[i].id}"
                                onclick="goPost(this)">${data[i].postTitle}</span>
                        </div>
                        <div class="postInformation">
                            <div class="poster">
                                <div class="posterImg" data-user="${data[i].userId}" onclick="goUser(this)">
                                    <img src="${data[i].name}" alt="">
                                </div>
                                <p class="posterName">
                                    ${data[i].userName}
                                </p>
                            </div>
                            <div class="like">
                                <div class="likeContainer">
                                    <i class="iconfont icon-like-1"></i>
                                     <span class="likeNumber">${data[i].fansNumber}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    `
            }
            // 添加新条目
            $('.infinite-scroll-bottom .post').append(html);

        }
        //预先加载20条
        // addItems(itemsPerLoad, 0);

        // 上次加载的序号

        // var lastIndex = 20;

        // 注册'infinite'事件处理函数
        var pageNumber = 1
        $(document).on('infinite', '.infinite-scroll-bottom', function () {

            // 如果正在加载，则退出
            if (loading) return;

            loading = true;

            // 模拟1s的加载过程
            setTimeout(function () {
                loading = false;
                $.ajax({
                    type: 'get',
                    url: '/homepage/getPost',
                    data: {
                        pageNumber: pageNumber
                    },
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                        if (data.err == 0) {
                            addItems(data.data);
                            pageNumber++;
                        } else {
                            $.alert(data.msg);
                        }
                    }
                })
                $.refreshScroller();
            }, 1000);
        });

        function goPost(obj) {
            console.log(obj.dataset.post)
            window.location.href = '/post/post/' + obj.dataset.post + '/detail'
        }
        function goUser(obj) {
            console.log(obj.dataset.user)

        }

    </script>
</body>

</html>